/* pages/add/add.wxss */
@import "./css/iconfont.scss";
/* 步骤条 */
@import "./css/step.scss";

page {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.correct {
	flex: 1;
}

.box {
	width: 100%;
	margin: 0 auto;
	height: calc(100vh - 230rpx);
	// border: 1rpx solid red;
	margin-top: 120rpx;
	// overflow-y: scroll;
}

.box swiper {
	height: calc(100vh - 230rpx);

}

.box swiper scroll-view {
	height: calc(100vh - 230rpx);
	overflow-y: none;
}

.box swiper swiper-item {
	padding: 0 2.5%;
	box-sizing: border-box;
}

.form {
	display: flex;
	font-size: 30rpx;
	justify-content: space-between;
	// border: 1rpx solid red;
	margin-bottom: 45rpx;
}

.form>view:first-child {
	width: 170rpx;
}

.form input {
	flex: 1;
	font-size: 28rpx;
}

.address {
	display: flex;
	flex: 1;
}

.address .icon-dingwei {
	margin-right: 15rpx;
	color: #F3AB00;
	font-size: 28rpx;
	align-items: center;
	margin-top: 10rpx;
}

.icon-xiangyoujiantou {
	font-size: 26rpx;
	display: flex;
	align-items: center;
}

.tip {
	font-size: 28rpx;
	color: #999;
	margin: 15rpx 0 25rpx;
}

.img_list {
  display: flex;
  justify-items: self-start;
  flex-flow: row wrap;
}

.img {
	// border: 1rpx solid red;
	margin-right: 10rpx;
	position: relative;
}

.img image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
}

.img .icon {
	background-color: rgba($color: #000000, $alpha: 0.6);
	width: 32rpx;
	height: 32rpx;
	text-align: center;
	line-height: 32rpx;
	border-radius: 0 10rpx 0 0;
	position: absolute;
	top: 0;
	left: calc(160rpx - 32rpx);
}

.icon-chacha {
	font-size: 24rpx;
	color: #fff;
}

.img_add {
	display: block;
}

.change .type {
	font-size: 30rpx;
	margin-bottom: 20rpx;
}

.change .list {
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
}

.list .list_item {
	width: 20%;
	text-align: center;
	// border: 1rpx solid red;
	margin-bottom: 25rpx;
  position: relative;
}

.list_item .icon {
	width: 80rpx;
	height: 80rpx;
	margin: 0 auto;
	margin-bottom: 8rpx;
	display: flex;
	justify-content: center;
  align-items: center; 
}
.list_item .active{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50px;
	background: rgba(247, 201, 0, 0.9);
  border: 1rpx solid #F3AB00;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;top:20rpx;left:50rpx;
}
.list .list_item_name {
	font-size: 24rpx;
	color: #5e3113;
}

.list_item .icon .iconfont {
	font-size: 45rpx;
	color: #5e3113;
}
.list_item .icon .icon-wancheng{
	color: #fff !important;
}
.task,
.switch,
.info,
.type_add {
	width: 95%;
	margin: 0 auto;
}

.content {
	margin-top: 20rpx;
	width: 100%;
	background-color: #F5F5F5;
	padding: 30rpx 35rpx 20rpx;
	box-sizing: border-box;
}

.content>view:first-child>view:first-child {
	width: 4rpx;
	height: 30rpx;
	background-color: #F3AB00;
	margin-top: 5rpx;
	margin-right: 5rpx;
}

textarea {
	font-size: 28rpx;
}

.number {
	margin-left: 90%;
	color: #999;
	font-size: 30rpx;
}

.switch {
	display: flex;
	justify-content: space-between;
	margin: 25rpx auto;
}

/* switch */
.wx-switch-input {
	width: 82rpx !important;
	height: 40rpx !important;
}

/*关闭状态*/
.wx-switch-input::before {
	width: 80rpx !important;
	height: 36rpx !important;
}

/*开启状态*/
.wx-switch-input::after {
	width: 38rpx !important;
	height: 36rpx !important;
}

.info {
	box-shadow: 0px 0px 2px 2px rgb(214, 214, 214);
	border-radius: 10rpx;
  padding: 20rpx;
  margin:20rpx auto;
	box-sizing: border-box;
}

.info .info_cost>view,
.info .info_condition>view {
	display: flex;
	font-size: 28rpx;
	margin: 0 0 10rpx;
}

.info .info_condition>view {
	margin-top: 20rpx;
}

.info .info_cost>view:first-child>view:first-child,
.info .info_condition>view:first-child>view:first-child {
	width: 5rpx;
	height: 30rpx;
	background-color: #F3AB00;
	border-radius: 8rpx;
	margin-top: 8rpx;
	margin-right: 8rpx;
}
.info_cost .type{
  display: flex;
  justify-content: space-around;
}
.info_cost .type {
  font-size: 26rpx;
  margin:0 20rpx;
}

.info_cost .type text {
	color: #F3AB00;
}

.info_cost .type .icon .iconfont {
	font-size: 18rpx;
	color: #fff;
	text-align: center;
	line-height: 32rpx;
}

.info_condition {
  display: flex;
  flex-direction: column;
}
.info_condition .point{
  display: flex;
  flex-flow: row wrap;
}
.info_condition .point view {
	box-shadow: 0px 0px 2px 2px rgb(214, 214, 214);
	border-radius: 10rpx;
  height: 35rpx;
  padding:5rpx;
	font-size: 24rpx;
	text-align: center;
  line-height: 35rpx;
  margin:5rpx 10rpx;
}

.type_add {
	border: 4rpx dashed #F3AB00;
	height: 165rpx;
	margin-top: 45rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #F3AB00;
}

.deny {
	width: 95%;
	margin: 0 auto;
}

.foot {
	width: 100%;
	padding: 0 5%;
	box-sizing: border-box;
	position: sticky;
	bottom: 0;
	left: 5%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
	box-sizing: border-box;
	background-color: #fff;
}

.draft {
	width: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #333;
}

.draft>view:last-child {
	font-size: 28rpx;
}

.up,
.next,
.upone,
.preview {
	height: 80rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
}

.up {
	width: 200rpx;
	border: 1rpx solid #F3AB00;
	color: #F3AB00;
}

.next,
.upone,
.preview {
	background-color: #F3AB00;
	border-radius: 50rpx;
	color: #fff;
}

.next,
.preview {
	width: 325rpx;
}

.upone {
	flex: 1 !important;
	margin-left: 10rpx;
}

/*radio未选中时样式 */
radio .wx-radio-input {
	width: 28rpx;
	height: 28rpx;
	border-radius: 50%;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked {
	background: #fff !important;
	border: 1rpx solid #F3AB00 !important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
	border-radius: 50%;
	/* 圆角 */
	width: 24rpx;
	/* 选中后对勾大小，不要超过背景的尺寸 */
	height: 24rpx;
	/* 选中后对勾大小，不要超过背景的尺寸 */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0rpx;
	/* 对勾大小 30rpx */
	color: transparent;
	/* 对勾颜色 白色 */
	background: #F3AB00;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}




.picke {
	.van-picker-column__item--selected {
		color: var(--picker-option-selected-text-color, #323233);
		font-weight: var(--font-weight-bold, 500);
		background-color: #f5f5f5;
	}
}

.detail-modal{
	display: flex;
	justify-content: center;
	align-items: center;
	.modal{
		width: 80%;
		border-radius: 20rpx;
		margin: 0 auto;
		background-color: #fff;
		padding: 45rpx;
		box-sizing: border-box;
		position: relative;
		>view:first-child{
			margin-top: 45rpx;
			text-align: center;
			.iconfont{
				font-size: 150rpx;
				color: #F3AB00;
			}
			.title{
				font-size: 30rpx;
				margin: 15rpx 0;
			}
			.tip{
				font-size: 26rpx;
			}
		}
		.btn{
			width: 85%;
			background-color: #F3AB00;
			color: #fff;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			margin-top: 90rpx;
		}
		.icon-chacha{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			width: 55rpx;
			height: 55rpx;
			position: absolute;
			top: 0;
			right: 0;
			background-color: rgba($color: #000000, $alpha: 0.1);
			border-radius: 0 10rpx 0 10rpx;
		}
	}
	

}

